<template>
  <Layout :showHome="false" :showH="false">
    <div class="container">
      <div class="header">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
        <h2>实名认证</h2>
        <van-icon name="" />
      </div>
      <div class="picture">
          <h4>请上传身份证图片</h4>
          <van-uploader :after-read="afterRead" v-model="fileList" multiple />
      </div>
      <van-form @submit="onSubmit">
          <van-field
            v-model="name"
            name="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写姓名' },{ pattern, message: '请输入正确名字' }]"
            size="big"
          />
          <van-field
            v-model="cardNumber"
            name="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '请填写身份证号' },{ validator, message: '请输入正确卡号' }]"
            size="big"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div style="margin: 16px" class="btn">
            <van-button round block type="info" native-type="submit" color="#f56e00" :disabled="flag">{{text}}</van-button>
          </div>
      </van-form>
    </div>
  </Layout>
</template>

<script>
import { Dialog } from 'vant'
import { editActiveApi, editMessageApi, editUserApi, UserApi } from '@/apis/signApi'

export default {
  data () {
    return {
      userId: '',
      cardNumber: '',
      flag: false,
      name: '',
      text: '提交信息',
      pattern: /^[\u4E00-\u9FA5]{2,4}$/,
      fileList: [
      ],
      radio: '男',
      message: [],
      obj: {}
    }
  },
  methods: {
    validator (val) {
      return /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)
    },
    async onSubmit (values) {
      /* console.log('submit', values) */
      if (this.fileList.length === 0) {
        this.$toast.fail('请上传身份证图片！')
        return
      }
      if (this.redio === '') {
        this.$toast.fail('请选择性别！')
        return
      }
      this.userId = this.$store.getters['common/userId']
      await editActiveApi(this.userId, 1)
      await editUserApi(this.userId, {
        name: this.name,
        IDcard: this.cardNumber,
        sex: this.radio
      })
      this.flag = true
      this.text = '已提交'
      Dialog.alert(
        {
          title: '实名认证成功！',
          message: '',
          theme: 'round-button'
        }).then(() => {
        this.$router.push('/home')
      })
      let objId = 0
      const res = await UserApi(this.userId)
      this.message = res.message
      if (this.message.length === 0) {
        objId = 0
      } else {
        objId = Number(this.message[this.message.length - 1].id)
      }
      this.obj = {
        id: objId + 1,
        title: '消息通知',
        desc: '实名认证成功！请继续完成注册流程，绑定银行卡号！',
        status: 0
      }
      this.message.push(this.obj)
      await editMessageApi(this.userId, this.message)
    },
    afterRead (file) {
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.container {
  padding: 0 20px;
  .header {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 1rem;
      font-weight: normal;
      margin: 0;
    }
  }
.picture{
    margin-top: 20px;
    margin-left: 10px;
    h4{
        font-size: 0.8rem;
        font-weight: normal;
        color: @a1;
    }
}
.van-form{
    margin-top: 30px;
    .btn{
      margin-top: 30px !important;
    }
  }
}
</style>
